<template>
    <div style="padding: 10px;">
        <Row class="addHeader">
            <Col span="1">
            <router-link to="/washList">
                <Icon type="ios-arrow-left" size=30></Icon>
            </router-link>
            </Col>
            <Col span="22">
            <p>编辑洗衣机</p></Col>
        </Row>

        <Row class="formBox">
            <Col span="24">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="labelWidth">
                <Row>
                    <Col span="10" offset="6">
                    <FormItem label="设备名称:" prop="device_name">
                        <Input v-model="formValidate.device_name" placeholder="请输入设备名称"></Input>
                    </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="10" offset="6">
                    <FormItem label="设备ID:" prop="device_uuid">
                        <Input v-model="formValidate.device_uuid" placeholder="请输入设备ID"></Input>
                    </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="10" offset="6">
                    <FormItem label="状态:" prop="device_status">
                        <Select v-model="formValidate.device_status" placeholder="请输入设备状态">
                            <Option v-for="(item,key) in statusList" :value="item" :key="key">{{ item }}</Option>
                        </Select>
                    </FormItem>
                    </Col>
                </Row>

                <Row>
                    <Col span="10" offset="6">

                    <FormItem label="地址:" prop="device_address">
                        <Input v-model="formValidate.device_address" placeholder="地址不能为空"></Input>
                    </FormItem>
                    </Col>
                </Row>

                <Row>
                    <Col span="10" offset="6">
                    <FormItem label="经度:" prop="device_longitude">
                        <Input v-model="formValidate.device_longitude" placeholder="经度不能为空"></Input>
                    </FormItem>
                    </Col>
                </Row>

                <Row>
                    <Col span="10" offset="6" >
                    <FormItem label="纬度:" prop="device_latitude">
                        <Input v-model="formValidate.device_latitude" placeholder="纬度不能为空"></Input>
                    </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="10" offset="6">
                    <FormItem label="洗衣机类型:" prop="device_type">
                        <Input v-model="formValidate.device_type" placeholder="设备类型不能为空"></Input>
                    </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="10" offset="6">
                    <FormItem label="设备代码模式:" prop="device_code_mode">
                        <Select v-model="formValidate.device_code_mode" placeholder="设备代码模式不能为空">
                            <Option v-for="(item,key) in deviceCodeModeList" :value="item" :key="key">{{ item }}</Option>
                        </Select>
                    </FormItem>
                    </Col>
                </Row>

                <Row>
                    <Col span="10" offset="6">
                    <FormItem>
                        <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
                        <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">Reset
                        </Button>
                    </FormItem>
                    </Col>
                </Row>
            </Form>
            </Col>
        </Row>
    </div>
</template>
<script>
    import {WashListApi} from "../../../static/api/api";

    export default {
        data() {
            return {
                washId: this.$route.query.id,
                labelWidth: '200',
                /*deviceCodeModeList:[{id:1,name:'THREE'},{id:2,name:'FOUR'}],
                statusList:[{id:1,name:'STANDBY'},{id:2,name:'WORKING'},{id:3,name:'BROKEN'}],*/

                deviceCodeModeList:['THREE','FOUR'],
                statusList:['STANDBY','WORKING','BROKEN'],
                formValidate: {
                    device_name: '',
                    device_uuid: '',
                    device_icon: '',
                    device_address: '',
                    device_latitude: '',
                    device_longitude: '',
                    device_type: '',
                    device_code_mode: [],
                    device_status:[]
                },
                ruleValidate: {
                    device_name: [
                        {required: true, message: 'The name cannot be empty', trigger: 'blur'}
                    ],
                    device_uuid: [
                        {required: true, message: 'The name cannot be empty', trigger: 'blur'}
                    ],
                    device_icon: [
                        {required: true, message: 'The name cannot be empty', trigger: 'blur'}
                    ],
                    device_address: [
                        {required: true, message: 'The name cannot be empty', trigger: 'blur'}
                    ],
                    device_latitude: [
                        {required: true,  message: 'The name cannot be empty', trigger: 'blur'}
                    ],
                    device_longitude: [
                        {required: true,  message: 'The name cannot be empty', trigger: 'blur'}
                    ],
                    device_type: [
                        {required: true, message: 'The name cannot be empty', trigger: 'blur'}
                    ],
                    device_status: [
                        {required: true, message: 'The name cannot be empty', trigger: 'change'}
                    ],
                    device_code_mode: [
                        {required: true, message: 'The name cannot be empty', trigger: 'change'}
                    ]
                }

            }
        },
        mounted() {
            this.$nextTick(function () {
                console.log(this.washId)
               this.washSelect();
            })
        },
        methods: {
            washSelect() {
                WashListApi.select(this.washId).then(res => {
                    console.log(res);
                    this.formValidate.device_name =res.name;
                    this.formValidate.device_address=res.location;
                    this.formValidate.device_latitude=String(res.latitude);
                    this.formValidate.device_longitude=String(res.longitude);
                    this.formValidate.device_status=res.status;
                    this.formValidate.device_uuid=res.deviceId;
                    this.formValidate.device_code_mode=res.deviceCodeMode;
                    this.formValidate.device_type=res.deviceType;
                }).catch(err => {

                })
            },

            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        var formdata = {
                            id: this.washId,
                            name: this.formValidate.device_name,
                            location: this.formValidate.device_address,
                            latitude: this.formValidate.device_latitude,
                            longitude: this.formValidate.device_longitude,
                            status: this.formValidate.device_status,
                            deviceId: this.formValidate.device_uuid,
                            deviceCodeMode: this.formValidate.device_code_mode,
                            deviceType: this.formValidate.device_type
                        };
                        WashListApi.update(formdata).then(res => {
                            this.$Message.success('Success!');
                            this.$router.push({path: '/washList'})

                        }).catch(err => {
                            this.$Message.error('编辑失败!');
                        })
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleReset(name) {
                this.$refs[name].resetFields();
            }
        }
    }
</script>
<style>
    .addHeader {
        height: 47px;
        border-bottom: 1px dashed #efefef;
    }

    .addHeader p {
        font-size: 20px;
        color: #666666;
        text-align: center;
    }

    .formBox {
        padding-top: 20px;
    }

    .ivu-form-item-label {
        text-align: right;
        vertical-align: middle;
        float: left;
        font-size: 14px;
        color: #495060;
        line-height: 1;
        padding: 10px 12px 10px 0;
        box-sizing: border-box;
        font-weight: 600 !important;
    }

    .roleInfo_body p {
        text-align: center;
        padding-top: 3%;
    }

    .roleInfo_body p.p_role_top {
        text-align: center;
        padding-top: 10% !important;
    }

    .roleInfo_body h6 {
        font-size: 14px;
        text-align: center;
        vertical-align: middle;
        line-height: 80px !important;
    }

    .roleInfo_line p {
        vertical-align: middle
    }


</style>
